<template>
  <div class="tab-bar" >
    <van-tabbar v-model="active" route >
  <van-tabbar-item
  v-for="nav in navs"
  :key="nav.path"
  :to="nav.path"
  :icon="(nav.meta?.icon as string)"
  raplce
  :badge="nav.path==='/cart' && store.totaAmount ?  store.totaAmount:''"
    >{{ nav.meta?.title}}</van-tabbar-item>
  <!-- <van-tabbar-item to="/category" icon="list-switch">分类</van-tabbar-item>
  <van-tabbar-item to="/cart" icon="shopping-cart-o">购物车</van-tabbar-item>
  <van-tabbar-item to="/mine" icon="user-o">我的</van-tabbar-item> -->
</van-tabbar>
  
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import routes from "@/router/routes"
import useCartStore from '@/store/modules/cart';


const store = useCartStore()



// tabbar  上激活索引
const active = ref(0);

//从routes 数组中筛选出需要在tabbar上渲染的 tab项数据


// const navs =  routes.filter( route =>route.meta && route.meta.inTabbar) 

//?. 可选链运算符
const navs =  routes.filter( route =>route.meta?.inTabbar) 

// ?? 空值合并运算符
console.log("navs",navs)
</script>
<style lang="less" scoped> 
.tab-bar{
  height: 50px;
}
</style>
